<template>
  <div class="computer-root">
    <h2>此电脑</h2>
    <div class="drives">
      <div v-for="drive in drives" :key="drive.name" class="drive" :class="{active: selectedDrive && selectedDrive.name === drive.name}" @click="selectDrive(drive)">
        <img src="/src/assets/home/computer.png" class="icon" />
        <span>{{ drive.label }}</span>
      </div>
    </div>
    <div v-if="selectedDrive" class="drive-content">
      <h3>{{ selectedDrive.label }}</h3>
      <ul>
        <li v-for="item in selectedDrive.children" :key="item.name" @click.stop="selectItem(item)" :class="{active: selectedFolder && selectedFolder.name === item.name}">
          <img :src="getIcon(item)" class="icon" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div v-if="selectedFolder">
        <h4>{{ selectedFolder.name }}</h4>
        <ul>
          <li v-for="file in selectedFolder.children" :key="file.name">
            <img :src="getIcon(file)" class="icon" />
            <span>{{ file.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { fileSystem } from '../../../core/desktopData'

const drives = fileSystem.drives
const selectedDrive = ref(null)
const selectedFolder = ref(null)

function selectDrive(drive) {
  selectedDrive.value = drive
  selectedFolder.value = null
}
function selectItem(item) {
  if (item.type === 'folder') {
    selectedFolder.value = item
  }
}
function getIcon(item) {
  if (item.type === 'drive') return '/src/assets/home/computer.png'
  if (item.type === 'folder') return '/src/assets/home/ziyuan.png'
  return '/src/assets/login/person.png'
}
</script>
<style scoped>
.computer-root { padding: 16px; font-family: 'Segoe UI', system-ui, sans-serif; }
.drives { display: flex; gap: 32px; margin-bottom: 16px; }
.drive { cursor: pointer; display: flex; align-items: center; gap: 8px; background: #f6f8fa; border-radius: 8px; padding: 12px 24px; box-shadow: 0 2px 8px #0001; transition: box-shadow 0.2s; }
.drive:hover { box-shadow: 0 4px 16px #0002; background: #eaf1fb; }
.icon { width: 32px; height: 32px; }
.drive-content { background: #fff; border-radius: 8px; padding: 16px; margin-top: 8px; box-shadow: 0 2px 8px #0001; }
ul { list-style: none; padding: 0; }
li { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0; border-radius: 4px; transition: background 0.2s; }
li:hover { background: #f0f6ff; }
.drive.active { background: #eaf1fb; box-shadow: 0 4px 16px #0078d733; }
li.active { background: #eaf1fb; }
</style> 